<template>
  <div>
    <section class="tabBar-wrap">
      <article class="tabBar-box">
        <ul class="tabBar-nav" v-if="navList.length > 0">
          <li
            class="item"
            v-for="(item, index) in navList"
            @click="selectNavItem(index,item.pagePath)"
            :key="index"
          >
            <p class="item-images">
              <img
                :src="selectNavIndex === index ? item.selectedIconPath : item.iconPath"
                alt="iconPath"
              />
            </p>
            <p
              :class="selectNavIndex === index ? 'item-text item-text-active' : 'item-text' "
            >{{item.text}}</p>
          </li>
          <li v-if="needButton" style="flex: 1">
            <div class="submit-box">
              <img
                src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/qushichang(3).png"
                @click="bindNavigateTo('/pages/shop-management/dis/index/main')"
                mode="widthFix"
                class="imgLinkBtn"
              />
            </div>
          </li>
        </ul>
      </article>
    </section>
    <div class="isOneClickDis" v-if="isAlert">
      <div class="zz" @click="zzOneClickDis"></div>
      <div class="box">
        <div class="imgBox">
          <img :src="themeImg" mode="widthFix" />
          <div class="checkbox">
            <checkbox-group @change="onAllChange">
              <!-- <checkbox
                :checked="isAllShops"
                value="立即成功分销商即同意"
                color="#5b94f6"
              ></checkbox>-->
              <label v-for="(item,index) in items" :key="index">
                <checkbox :value="item.name" />
                {{item.value}}
              </label>
            </checkbox-group>
          </div>
          <div class="cont">
            <a href="/pages/shop-management/deal1/main" class="myDeal">《分销商入驻协议》</a>
            <a
              href="/pages/shop-management/deal-dis-shop/main"
              class="myDeal"
            >《分销市场管理规范》</a>
          </div>
          <button class="btn" @click="enter">立即入驻</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['selectNavIndex', 'needButton', 'btnText'],
  data () {
    return {
      isAlert: false,
      isAllShops: false,
      goUrl: '',
      items: [{ name: 'YES', value: '立即成功分销商即同意' }],
      navList: [
        {
          pagePath: '/pages/home/index/main',
          text: '快捷服务',
          iconPath: '/static/assets/icon/new-home-icon1.png',
          selectedIconPath: '/static/assets/icon/new-home-icon2.png'
        },
        {
          pagePath: '/pages/shop-management/index/main',
          text: '店铺管理',
          iconPath: '/static/assets/icon/i22.png',
          selectedIconPath: '/static/assets/icon/i21.png'
        },
        {
          pagePath: '/pages/mine/index/main',
          text: '个人中心',
          iconPath: '/static/assets/icon/i42.png',
          selectedIconPath: '/static/assets/icon/i41.png'
        }
      ]
    }
  },
  computed: {
    themeImg () {
      let appId = this.$store.state.appId
      if (appId !== 'wx657f1b2fb50b5be3') {
        return 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bg_dialog_fenxiao.png'
      } else {
        return 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bg_dialog_fenxiao2.png'
      }
    }
  },
  created () {},
  methods: {
    zzOneClickDis () {
      this.isAlert = false
    },
    onAllChange (e) {
      if (e.target.value.length) {
        this.isAllShops = true
      } else {
        this.isAllShops = false
      }
    },
    enter () {
      const vm = this
      if (vm.isAllShops) {
        vm.$cookie.set('isOneClickDis', true)
        vm.isAllShops = false
        vm.isAlert = false
        let url = vm.goUrl
        wx.switchTab({
          url
        })
      } else {
        vm.$toast('同意协议后方可进入')
      }
    },
    /**
     * 点击导航栏
     * @param index
     */
    selectNavItem (index, pagePath) {
      if (index === this.selectNavIndex) {
        return false
      }

      if (index === 0 && this.selectNavIndex === -1) {
        this.$emit('fetch-index')
      }
      this.bindViewTap(pagePath)
    },

    /**
     * 路由跳转
     */
    bindNavigateTo (url) {
      const vm = this
      vm.goUrl = url
      if (!vm.$cookie.get('isOneClickDis')) {
        vm.isAlert = true
      } else {
        vm.isAlert = false
        if (url === '/pages/shop-management/dis/index/main') {
          wx.navigateTo({
            url
          })
        } else {
          wx.navigateTo({
            url
          })
          // wx.switchTab({
          //   url
          // })
        }
      }
    },

    /**
     * tabBar路由跳转
     */
    bindViewTap (url) {
      wx.switchTab({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.tabBar-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  // padding: 20px 0;
  border-top: 1px solid #eee;
  background-color: #f8f8f8;
}
.tabBar-nav {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  .item {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  .item-text {
    color: #666;
    font-size: 14px;
    transition: 0.24s linear;
  }
  .item-text-active {
    color: $blue;
  }
  .item-images {
    width: 22px;
    height: 22px;
    margin: 0 auto;
    text-align: center;
    transition: 0.24s linear;
    & img {
      display: inline;
      width: 100%;
      height: 100%;
    }
  }
}
.submit-box {
  position: relative;
  .imgLinkBtn {
    position: absolute;
    width: 400%;
    height: 40px;
    right: 0;
    bottom: 0;
    top: 50%;
    transform: translate(0, -50%);
  }
}
.isOneClickDis {
  .zz {
    position: fixed;
    z-index: 3;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
  }
  .box {
    width: 270px;
    height: 370px;
    border-radius: 6px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 444;
    > .imgBox {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 5;
      img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      .checkbox {
        width: 80%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, 0);
      }
      .cont {
        width: 80%;
        position: absolute;
        left: 50%;
        top: 60%;
        transform: translate(-50%, 0);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        font-size: 13px;
        color: $blue;
      }
      .btn {
        width: 80%;
        position: absolute;
        left: 50%;
        top: 75%;
        transform: translate(-50%, 0);
        border-radius: 25px;
        background: $blue;
        color: #fff;
        font-size: 15px;
      }
    }
  }
}
</style>
